<template>
    <div class="">
        <el-dialog title="编辑户档" :visible.sync="dialog" width="50%" :before-close="dialogClose">
            <el-form ref="formData" :model="formData" label-width="100px">
                <el-form-item label="户口簿编号" prop="sn">
                    <el-input v-model="formData.sn" placeholder="请输入户口簿编号"></el-input>
                </el-form-item>
				<el-form-item label="所属村级" prop="hamletid">
				    <el-select v-model="formData.hamletid" style="width: 100%;" placeholder="请选择所属村级">
				    	<el-option :label="item.title" :value="item.id" v-for="(item, index) in Hamlet"></el-option>
				    </el-select>
				</el-form-item>
				<el-row>
					<el-col :span="8">
						<el-form-item label="户主姓名" prop="header">
						    <el-input v-model="formData.header" placeholder="请输入户主姓名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="身份证号" prop="idcard">
						    <el-input v-model="formData.idcard" placeholder="请输入户主身份证号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="手机号" prop="phone">
						    <el-input v-model="formData.phone" placeholder="请输入户主手机号"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="性别" prop="sex">
						    <el-select v-model="formData.sex" style="width: 100%;" placeholder="请选择户主性别">
						    	<el-option :label="item" :value="item" v-for="(item, index) in Site.sex"></el-option>
						    </el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="组别" prop="group">
						    <el-input v-model="formData.group" placeholder="请输入组别">
								<template slot="append">组</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="人口数量" prop="person">
						    <el-input v-model="formData.person" placeholder="请输入人口数量">
								<template slot="append">人</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="家庭类别" prop="rate">
						    <el-select v-model="formData.cate" style="width: 100%;" placeholder="请选择家庭类别">
						    	<el-option :label="item" :value="item" v-for="(item, index) in Site.cate"></el-option>
						    </el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="饮水类型" prop="rate">
						    <el-select v-model="formData.water" style="width: 100%;" placeholder="请选择饮水类型">
						    	<el-option :label="item" :value="item" v-for="(item, index) in Site.water"></el-option>
						    </el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="收入情况" prop="rate">
						    <el-select v-model="formData.income" style="width: 100%;" placeholder="请选择收入情况">
						    	<el-option :label="item" :value="item" v-for="(item, index) in Site.income"></el-option>
						    </el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="联户责任人" prop="header">
						    <el-input v-model="formData.responsible" placeholder="请输入联户责任人"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="责任人职务" prop="idcard">
						    <el-input v-model="formData.position" placeholder="请输入责任人职务"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="责任人电话" prop="phone">
						    <el-input type="tel" v-model="formData.resphone" placeholder="请输入责任人电话"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
                <el-form-item label="现居住地" prop="addr">
                    <el-input v-model="formData.addr" placeholder="请输入现居住地"></el-input>
                </el-form-item>
            	<el-form-item>
            		<el-button @click="dialogClose">取 消</el-button>
            		<el-button type="primary" @click="formSubmit">确 定</el-button>
            	</el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
			return {
				dialog: false,
				Hamlet: [],
				Site: [],
				formData: {
					id: 0,
					hamletid: '', //所属村落
					sn: '', //户口簿编号
					header: '', //户主姓名
					phone: '', //户主电话
					idcard: '', //户主身份证
					sex: '', //性别
					group: '', //组别
					person: '', //人口数量
					cate: '', //家庭类别
					water: '', //饮水类型
					income: '', //收入情况
					addr: '', //现居住地址
				}
			}
        },
		created() {
		},
		watch: {
			dialog () {
				if(!this.dialog) {
					this.clearFormData()
					this.$emit('getData')
				} else {
					this.getHamlet()
					this.getSite()
				}
			}
		},
        methods: {
			getHamlet () {
				this.$apiPost('Hamlet/getHamlet').then(res => {
					if(res.code == 1) {
						this.Hamlet = res.data
					}
				})
			},
			getSite () {
				this.$apiPost('Index/getSiteFile').then(res => {
					if(res.code == 1) {
						this.Site = res.data
					}
				})
			},
			dialogClose(){
				this.$emit('dialogToggle')
			},
			clearFormData () {
				this.formData = {
					id: 0
				}
			},
			// 保存编辑
			formSubmit() {
				if(!this.formData.header||this.formData.header==null){
					return this.$message.error('请输入户主姓名！')
				}
				this.$apiPost('Home/editData', this.formData).then(res => {
					if(res.code == 1) {
						this.$message.success(res.msg)
						this.dialogClose()
					} else {
						this.$message.error(res.msg)
					}
				})
			},
        }
    };
</script>
<style scoped>
	.mselect{
		width: 100%;
	}
	.mtdiv{
		margin-top: 10px;
		display: inline-block;
		width: 100%;
	}
	.mtdiv .mtdiv-v{
		float: left;
		width: 50%;
		margin-bottom: 5px;
		display: flex;
		align-items: center;
	}
	.mtdiv .mtdiv-v label{
		float: left;
		margin-right: 10px;
	}
	.mtdiv .el-input{
		float: left;
		width: 80%;
		margin: 5px 0;
	}
</style>
